/*
 * @LastEditors: whitechiina 1293616053@qq.com
 * @LastEditTime: 2023-03-17 17:23:46
 */

import dayjs from 'dayjs'
import PopupType from '@/components/PopupType'
import PopupDate from '@/components/PopupDate'
import React, { useEffect, useRef, useState } from 'react'
import { Icon, Pull } from 'zarm'
import BillItem from '@/components/BillItem'
import s from './style.module.less'
import { billdata } from '@/utils/api'

const REFRESH_STATE = {
    normal: 0, // 普通
    pull: 1, // 下拉刷新（未满足刷新条件）
    drop: 2, // 释放立即刷新（满足刷新条件）
    loading: 3, // 加载中
    success: 4, // 加载成功
    failure: 5, // 加载失败
};

const LOAD_STATE = {
    normal: 0, // 普通
    abort: 1, // 中止
    loading: 2, // 加载中
    success: 3, // 加载成功
    failure: 4, // 加载失败
    complete: 5, // 加载完成（无新数据）
};

const Home = () => {
    const typeRef = useRef(); // 账单类型 ref
    const monthRef = useRef(); // 日期类型 ref
    const [page, setPage] = useState(1); // 分页
    const [list, setList] = useState([]); // 账单列表
    const [totalPage, setTotalPage] = useState(0); // 分页总数
    const [currentSelect, setCurrentSelect] = useState({}); // 当前筛选类型
    const [currentTime, setCurrentTime] = useState(dayjs().format('YYYY-MM')); // 当前筛选时间
    const [dataSource, setDataSource] = useState([]);
    const [refreshing, setRefreshing] = useState(REFRESH_STATE.normal);
    const [loading, setLoading] = useState(LOAD_STATE.normal);

    useEffect(() => {
        getBillList() // 初始化
    }, [page, currentSelect, currentTime])

    // 请求列表数据
    const refreshData = () => {
        setRefreshing(REFRESH_STATE.loading);
        if (page != 1) {
            setPage(1);
        } else {
            getBillList();
        };
    };

    const loadData = () => {
        if (page < totalPage) {
            setLoading(LOAD_STATE.loading);
            setPage(page + 1);
        }
    }

    const getBillList = async () => {
        const params = {
            date: '2023-03',
            type_id: 'all',
            page: 1,
            page_size: 10
        }

        const { data } = await billdata(params);
        setList(data.list);

        // 下拉刷新，重制数据
        if (page == 1) {
            setList(data.list);
        } else {
            setList(list.concat(data.list));
        }

        setTotalPage(data.totalPage);
        // 上滑加载状态
        setLoading(LOAD_STATE.success);
        setRefreshing(REFRESH_STATE.success);
    }

    // 添加账单弹窗
    const toggle = () => {
        typeRef.current && typeRef.current.show()
    };

    // 添加账单弹窗
    const addToggle = () => {
        addRef.current && addRef.current.show()
    }

    // 筛选类型
    const select = (item) => {
        setRefreshing(REFRESH_STATE.loading);
        setPage(1);
        setCurrentSelect(item)
    }
    // 筛选月份
    const selectMonth = (item) => {
        setRefreshing(REFRESH_STATE.loading);
        setPage(1);
        setCurrentTime(item)
    }
    // 选择月份弹窗
    const monthToggle = () => {
        monthRef.current && monthRef.current.show()
    };

    return <div>
        <div className={s.home}>
            <div className={s.header}>
                <div className={s.dataWrap}>
                    <span className={s.expense}>总支出：<b>¥ 200</b></span>
                    <span className={s.income}>总收入：<b>¥ 500</b></span>
                </div>

                <div className={s.typeWrap}>
                    <div className={s.left} onClick={toggle}>
                        <span className={s.title}>类型 <Icon className={s.arrow} type="arrow-bottom" /></span>
                    </div>
                    <div className={s.right}>
                        <span className={s.time} onClick={monthToggle}>2022-06<Icon className={s.arrow} type="arrow-bottom" /></span>
                    </div>
                </div>
            </div>
        </div>
        <div className={s.contentWrap}>
            {
                list.length ? <Pull
                    animationDuration={200}
                    stayTime={400}
                    refresh={{
                        state: refreshing,
                        handler: refreshData
                    }}
                    load={{
                        state: loading,
                        distance: 200,
                        handler: loadData
                    }}
                >
                    {
                        list.map((item, index) => <BillItem
                            bill={item}
                            key={index}
                        />)
                    }
                </Pull> : []
            }
        </div>

        {/* 时间 */}
        <PopupDate ref={monthRef} mode="month" onSelect={selectMonth} />
        {/* 弹窗 */}
        <PopupType ref={typeRef} onSelect={select} />
    </div>
}

export default Home